<template>
	<div v-loading="loading1" id="cate_right">
		<div class="category_banner" style="height:200px">
			<mu-carousel transition="fade">
				<mu-carousel-item>
					<img style="width: 200px;height: 100%;" src="../assets/images/banner_1.png">
				</mu-carousel-item>
				<mu-carousel-item>
					<img style="width: 200px;height: 100%;" src="../assets/images/l7.jpg">
				</mu-carousel-item>
				<mu-carousel-item>
					<img style="width: 200px;height: 100%;" src="../assets/images/l8.jpg">
				</mu-carousel-item>
				<mu-carousel-item>
					<img style="width: 200px;height: 100%;" src="../assets/images/l1.jpg">
				</mu-carousel-item>
				</mu-carousel>
	            </div>
			<div  class="category_left" style="z-index: 1001">
				<mu-container>
					<mu-row >
				<mu-col  span="24">
				<mu-paper  :z-depth="2">
					<mu-list v-for="item in cateGoodsData" :key="item.category_id">
					<mu-list-item  avatar>
						<mu-list-item-content >
						<mu-button style="margin-left: -27px;width: 102px;"  @click="imgbtn(item.category_id)" flat>{{item.category_name}}</mu-button>
						</mu-list-item-content>
					</mu-list-item>
					</mu-list>
				</mu-paper>
				</mu-col>
			</mu-row>
			</mu-container>
	        </div>
			<div style="margin-top: 1px;" class="category_right">
				<mu-container>
					<mu-flex justify-content="center">
						<mu-paper>
						<mu-grid-list class="gridlist-demo">
							<mu-grid-tile v-for="tile in cateGoodsData1" :key="tile.product_id">
								<div @click="imgbtn1($event,tile)">
									<img  style="width: 100%;" :src="tile.product_img_url" >
									<span  style="word-break:break-all; width:200px; overflow:auto;" slot="title">{{tile.product_name}}</span>
								</div>
							</mu-grid-tile>
						</mu-grid-list>
						</mu-paper>
					</mu-flex>
					</mu-container>
			</div>
	</div>
</template>
<script>
export default {
	name:'el-image',
		mounted(){
			this.fetchData1()
			this.imgbtn2()
		},
		data(){
			return {
				cateGoodsData:[],
				cateGoodsData1: [],
				loading: false,
				selected: '1',
				loading1: false,
				allLoaded: false,
			}
		},
		methods:{
			fetchData1 () {
				this.loading1 = true
				this.$axios.get('categorygoodsSum').then(res=> {
					this.cateGoodsData = res.bussdata;
					this.loading1 = false
				})
			},
			imgbtn (val) {
				this.loading1 = true
				this.cateGoodsData1 = []
				this.$axios.get('/categorygoods/', {
					params: {
						mId: val
					}
				}).then (res => {
						this.cateGoodsData1 = res.databuss
						this.loading1 = false
				})
			},
			imgbtn1(e,val) {
				e.stopPropagation()
				this.$_global.selfPage('/detail', {
                    productId:val.product_id
                },this.$router)
			},
			imgbtn2() {
				this.loading1 = true
				this.cateGoodsData1 = []
				this.$axios.get('/categorygoods/', {
					params: {
						mId: 3
					}
				}).then (res => {
					this.cateGoodsData1 = res.databuss
					this.loading1 = false
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
/deep/ .gridlist-demo{
  width: 360px;
  height: 100%;
  overflow-y: auto;
}
/deep/ .category_left {
	top: 247px !important;
    padding-top: 0px !important;
}
/deep/ .mu-carousel {
	height: 200px !important;
}
</style>

